<template>
    <main class="wss-container">
        <!-- 版本控制 -->
        <div class="versionControl-box">
            <el-row :gutter="20" type="flex">
                <el-col :span="8">
                    <NewCard title="终端列表" :border="false">
                        <el-table :data="SelectVerList" highlight-current-row @row-click="rowClick">
                            <el-table-column label="版本号">
                                <template slot-scope="scope">{{scope.row.ver}}</template>
                            </el-table-column>
                            <!-- <el-table-column label="更新内容" show-overflow-tooltip>
                                <template slot-scope="scope">{{scope.row.info}}</template>
                            </el-table-column> -->
                            <el-table-column label="终端数">
                                <template slot-scope="scope">9</template>
                            </el-table-column>
                            <el-table-column label="已更新">
                                <template slot-scope="scope">{{scope.row.publishedNum}}</template>
                            </el-table-column>
                        </el-table>

                        <!-- 添加版本号按钮 -->
                        <div class="bottomBtn">
                            <el-button class="addBtn" v-if="addVerShow" @click="addVerShow=false">+添加版本号</el-button>
                            <!-- 添加版本号表单 -->
                            <div class="addForm" v-else>
                                <el-form :inline="true" :model="addVerform" class="demo-form-inline">
                                    <el-form-item>
                                        <el-input v-model="addVerform.ver" class="addVerInput" placeholder="版本号"></el-input>
                                        <el-button type="primary" class="addSave" round @click="addVerSave">确认</el-button>
                                        <el-button round @click="addVerShow=true">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </NewCard>
                </el-col>
                <el-col :span="16">
                    <NewCard title="版本控制" :border="false" :isright="true">
                        <template #right>
                            <!-- 下拉框 选择版本 -->
                            <!-- <el-select v-model="typeValue" clearable placeholder="请选择终端" @change="changeType" @clear="changeType">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.type">
                                </el-option>
                            </el-select> -->
                        </template>

                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column label="终端" width="80px" show-overflow-tooltip>
                                <template slot-scope="scope">{{getTypeName(scope.row.type)}}</template>
                            </el-table-column>
                            <el-table-column prop="ver" label="版本号" width="60px"></el-table-column>
                            <el-table-column prop="createTime" label="时间" width="100px" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="info" label="更新内容">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.info" placeholder="请输入更新内容" @blur="blurInfo(scope.row)"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="url" label="URL" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <p v-if="editUrlId != scope.row.id">{{scope.row.url || '--'}}</p>
                                    <el-input v-model="scope.row.url" placeholder="链接地址" @blur="blurInfo(scope.row)" v-else class="editUrlInput"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="强制更新" width="80px">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.forced" active-color="#f87a23" @change="changeSwitch(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="上传" width="45px">
                                <template slot-scope="scope">
                                    <svg-icon icon-class="bj_icon_nor" v-if="scope.row.type=='3' || scope.row.type=='5' || scope.row.type=='7' || scope.row.type=='8'" class="editUrl" @click="clickEditUrlId(scope.row)"/>
                                    <el-upload
                                        v-else
                                        ref="uploadDom"
                                        class="upload-demo"
                                        accept=".dmg,.apk,.exe"
                                        action="#"
                                        :auto-upload="false"
                                        :limit="1"
                                        :on-change="(file, fileList)=>{uploadFile(file, fileList,scope.row)}"
                                        :file-list="fileList"
                                        :show-file-list="false">
                                        <svg-icon icon-class="upload" />
                                    </el-upload>
                                </template>
                            </el-table-column>
                            <el-table-column label="发布状态" width="80px">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.published" active-color="#f87a23" @change="changePublished(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 添加新版本按钮 -->
                        <div class="bottomBtn">
                            <el-button class="addBtn" v-if="addBtnShow" @click="addBtnShow=false">+添加新版本</el-button>
                            <!-- 添加新版本表单 -->
                            <div class="addForm" v-else>
                                <el-form :inline="true" :model="addform" class="demo-form-inline">
                                    <el-form-item>
                                        <!-- 下拉框 选择版本 -->
                                        <el-select v-model="addform.type" placeholder="终端">
                                            <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.type">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <!-- <el-form-item>
                                        <el-input v-model="addform.ver" placeholder="版本号"></el-input>
                                    </el-form-item> -->
                                    <el-form-item>
                                        <el-input v-model="addform.info" class="input-big" placeholder="更新内容"></el-input>
                                    </el-form-item>
                                    <el-form-item label="强制更新">
                                        <el-switch v-model="addform.forced" active-color="#f87a23"></el-switch>
                                    </el-form-item>
                                    <el-form-item v-if="addform.type=='3' || addform.type=='5' || addform.type=='7' || addform.type=='8'">
                                        <el-input v-model="addform.url" placeholder="地址URL"></el-input>
                                    </el-form-item>
                                    <el-form-item label="上传" v-else>
                                        <el-upload
                                            ref="uploadDom"
                                            class="upload-demo"
                                            accept=".dmg,.apk,.exe"
                                            action="#"
                                            :auto-upload="false"
                                            :limit="1"
                                            :on-change="addUploadFile"
                                            :file-list="fileList"
                                            :show-file-list="false">
                                            <svg-icon icon-class="check_on" v-if="addform.file"/>
                                            <svg-icon icon-class="upload" v-else/>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="是否发布">
                                        <el-switch v-model="addform.published" active-color="#f87a23"></el-switch>
                                    </el-form-item>
                                </el-form>
                                <el-button type="primary" class="addSave" round @click="save">确认</el-button>
                                <el-button round @click="cancelSave">取消</el-button>
                            </div>
                        </div>

                        <!-- 分页查询 -->
                        <div class="pagination">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageing.pageNum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageing.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageing.total">
                            </el-pagination>
                        </div>
                    </NewCard>
                </el-col>
            </el-row>
        </div>
    </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";

import { getAppVerListApi,getSelectAppVerByNewestApi,editAppVerApi,addAppVerApi,getSelectVerListApi,updateAppVerPublishApi } from "@/wss/newApi_3-24/base/appVer.js"
export default {
    name: 'versionControl',
    components:{
        NewCard
    },
    data(){
        return{
            // ----------------版本号列表----------------
            // 版本号分页参数
            verPageing: {pageNum: 1, pageSize: 10, total: 0},
            SelectVerList:[],//版本号列表
            addVerShow: true,//添加版本号显示隐藏
            //添加版本号
            addVerform:{
                ver: ''
            },
            // ----------------版本号列表----------------end

            // 分页参数
            pageing: {pageNum: 1, pageSize: 10, total: 0},
            //终端列表
            options: [
                {label: 'Windows',type: '1'},
                {label: 'Mac',type: '2'},
                {label: 'iPad',type: '3'},
                {label: '安卓平板',type: '4'},
                {label: 'iOS',type: '5'},
                {label: '安卓',type: '6'},
                {label: 'web PC',type: '7'},
                {label: 'web H5',type: '8'},
                {label: '微信小程序',type: '9'},
            ], 
            typeValue: '',//当前选择的版本号

            tableData:[], //数据列表
            fileList:[],//上传列表

            addBtnShow: true, // 底部添加按钮显示隐藏
            addform:{
                type:'1', //终端
                ver: '', //版本号
                info: '',//更新内容
                forced: true,//是否强制更新
                published: true,//是否发布
            },
            editUrlId: '',//当前编辑的url id
        }
    },
    async mounted(){
        await this.getSelectVerList() // 获取版本号列表
        this.getAppVerList() // 分页查询安装包
    },
    methods:{
        // ------------------------------版本号列表-------------------------------
        // 获取版本号列表
        async getSelectVerList(){
            let result = await getSelectVerListApi(this.verPageing)
            if(result.code==200){
                this.SelectVerList = result.rows
                this.typeValue  = result.rows[0].ver //版本号
                this.addform.ver = result.rows[0].ver //添加时候的版本号
            }
        },

        // 添加一条版本号
        addVerSave(){
            this.SelectVerList.unshift({
                ver: this.addVerform.ver,//版本号
                publishedNum: 0,
            })
            this.addVerShow = true //隐藏
            // 清除添加版本号
            this.addVerform = {
                ver: ''
            }
        },
        // ------------------------------版本号列表-------------------------------end

        // 分页回调
        handleSizeChange(val) {
            this.pageing.pageSize = val
            this.getAppVerList() // 分页查询安装包
        },
        handleCurrentChange(val) {
            this.pageing.pageNum = val
            this.getAppVerList() // 分页查询安装包
        },
        // 分页回调 end

        // 分页查询安装包
        async getAppVerList(){
            let {pageNum, pageSize} = this.pageing
            // 要传type
            let ver = this.typeValue //选择的版本
            let result = await getAppVerListApi({pageNum, pageSize, ver})
            if(result.code==200){
                this.pageing.total = result.total
                this.tableData = result.rows
            }
        },

        // 选择类型的时候
        rowClick(row){
            this.typeValue = row.ver
            this.addform.ver = row.ver
            this.getAppVerList() // 分页查询安装包
        },

        // 选择终端的时候
        changeType(){
            this.getAppVerList() // 分页查询安装包
        },

        // 获取版本名称
        getTypeName(type){
            const stateMap = {
                1: "Windows",
                2: "Mac",
                3: "iPad",
                4: "安卓平板",
                5: "iOS",
                6: "安卓",
                7: "web PC",
                8: "web H5",
                9: "微信小程序",
            };
            return stateMap[type];
        },

        // 修改是否强制更新
        changeSwitch(data){
            this.editAppVerFn(data) // 修改版本信息
        },

        // 修改发布状态
        changePublished(data){
            this.updateAppVerPublish(data) // 修改版本信息
        },

        // 修改版本发布状态的接口
        async updateAppVerPublish(data){
            let obj = {
                id: data.id,
                publish: data.published
            }
            let result = await updateAppVerPublishApi(obj)
            if(result.code==200){
                this.$message({message: result.msg, type: 'success'});
                // 刷新列表
                this.getAppVerList() // 分页查询安装包
            }
        },

        // 更新内容失去焦点
        blurInfo(data){
            this.editAppVerFn(data) // 修改版本信息
            this.editUrlId = ''
        },

        // 上传安装包
        uploadFile(file, fileList, row){
            // 获取最后的一个后缀
            let suffix = file.name.split('.')[file.name.split('.').length-1]
            console.log(suffix,file,'hhhhhhhhhhhhhhhhh');
            if(suffix == 'apk' || suffix == 'dmg' || suffix == 'exe'){
                this.$message({message: '正在上传，请稍等！',type: 'success',duration: 10000});
                this.editAppVerFn(row,file.raw) // 修改版本信息
                // 刷新列表
                this.getAppVerList() // 分页查询安装包
            }else{
                this.$message({message: '请上传 APK/DMG/EXE 文件',type: 'warning'});
            }
            this.$refs.uploadDom.clearFiles() //清除已选
        },

        // 修改版本信息
        async editAppVerFn(data,file){
            let formDate = new FormData()
            formDate.set("id", data.id)
            formDate.set("type", data.type)
            formDate.set("ver", data.ver)
            formDate.set("info", data.info)
            formDate.set("forced", data.forced)
            formDate.set("published", data.published)
            if(file) formDate.set("file", file)
            let result = await editAppVerApi(formDate)
            if(result.code==200){
                this.$message({message: result.msg,type: 'success'});
                // 刷新列表
                this.getAppVerList() // 分页查询安装包
            }
        },

        // 添加上传安装包
        addUploadFile(file, fileList){
            // 获取最后的一个后缀
            let suffix = file.name.split('.')[file.name.split('.').length-1]
            console.log(suffix,file,'hhhhhhhhhhhhhhhhh');
            if(suffix == 'apk' || suffix == 'dmg' || suffix == 'exe'){
                this.$set(this.addform,'file',file.raw)
            }else{
                this.$message({message: '请上传 APK/DMG/EXE 文件',type: 'warning'});
            }
            this.$refs.uploadDom.clearFiles() //清除已选
        },

        // ios和ipad点击编辑按钮
        clickEditUrlId(row){
            if(this.editUrlId == row.id){
                this.editUrlId = ''
            }else{
                this.editUrlId = row.id
            }
        },

        // 添加的接口
        async addAppVer(){
            if(this.addform.file){
                this.$message({message: '正在上传，请稍等！',type: 'success',duration: 10000});
            }
            // 创建formDate对象
            let formDate = new FormData()
            formDate.set("type", this.addform.type) //类型
            formDate.set("ver", this.addform.ver) //版本号
            formDate.set("info", this.addform.info) //更新内容
            formDate.set("forced", this.addform.forced) //是否强制更新
            formDate.set("published", this.addform.published)
            if(this.addform.file) formDate.set("file", this.addform.file) //上传文件
            if(this.addform.url) formDate.set("url", this.addform.url) //地址

            let result = await addAppVerApi(formDate)
            if(result.code==200){
                this.$message({message: '上传成功',type: 'success'});
                // 刷新列表
                await this.getSelectVerList() // 获取版本号列表
                this.getAppVerList() // 分页查询安装包
                // 初始化数据
                this.addBtnShow = true
                this.addform = {
                    type:'1', //终端
                    ver: '', //版本号
                    info: '',//更新内容
                    forced: true,//是否强制更新
                }
            }
        },

        // 点击确定按钮
        save(){
            if(!this.addform.ver){
                this.$message({message: '请输入版本号',type: 'warning'});
                return
            }
            this.addAppVer() // 添加的接口
        },

        // 点击取消添加
        cancelSave(){
            this.addBtnShow = true
            this.addform = {
                type:'1', //终端
                ver: '', //版本号
                info: '',//更新内容
                forced: true,//是否强制更新
            }
        },

    }
}
</script>

<style lang="scss" scoped>
/* 整体框样式 */
.versionControl-box {
    height: 100%;
    .el-row{
        height: 100%;
    }
    ::v-deep .el-card__body{
        position: relative;
        height: 100%;
        >div{
            height: calc(100% - 45px);
            overflow-y: auto;
        }
    }

    .el-table{
        &::before{
            display: none;
        }
        .el-input{
            ::v-deep .el-input__inner{
                // border: 0;
                // padding: 0;
                // background-color: transparent;
            }
        }
    }
    .editUrlInput{
        ::v-deep .el-input__inner{
            border: 1px solid #DCDFE6!important;
            padding: 0 10px!important;
            background-color: #fff!important;
        }
    }
    .editUrl{
        font-size: 20px;
        color: #2e3f5e;
        cursor: pointer;
    }
}

// 上传
.upload-demo{
    svg{
        font-size: 20px;
        color: #2e3f5e;
    }
}

// 添加新版本按钮
.bottomBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    .addBtn{
        width: 100%;
        border: 0;
        border-top: 1px solid #ECEDF0;
        background-color: #F8F8F8;
        line-height: 25px;
        color: #606E84;
    }
    // 添加表单
    .addForm{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        border: 0;
        border-top: 1px solid #ECEDF0;
        background-color: #F8F8F8;
        padding: 8px 30px;
        line-height: 25px;
        color: #606E84;
        .el-form-item{
            margin-bottom: 0;
        }
        .el-select,
        .el-input{
            width: 150px;
        }
        .input-big{
            width: 220px;
        }
        .addVerInput{
            margin-right: 10px;
        }
        .el-button{
            height: 34px;
            line-height: 34px;
            box-sizing: border-box;
            padding: 0 15px;
        }
        .addSave{
            background-color: #f87a23;
            border-color: #f87a23;
        }
    }
}

.pagination{
    text-align: center;
    padding: 15px 0;
    padding-bottom: 60px;
}
</style>
<style scoped>
::v-deep .versionControl-box .el-card__body>div::-webkit-scrollbar{
    width: 0;
}

/* 表格样式 */
.el-table {
  margin-bottom: 10px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table .el-table__body tr.current-row > td{
    background-color: #f3f3f3;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}
</style>